<template>
  <div class='usePannel'>
    <div class='box' :class='{active:index === value,error:index === value && status === 1}'
         v-for='(item,index) in list' :key='index'>{{ item }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'usePannel',
  props: {
    value: {
      type: Number,
      default: 0
    },
    status: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      list: ['ZBX', 'SNMP', 'JMX', 'IPMI']
    }
  }
}
</script>

<style lang='scss' scoped>
.usePannel {
  border-radius: 2px;
  .box {
    display: inline-block;
    border: 1px solid #cccccc;
    border-left-width: 0;
    min-width: 29px;
    padding: 0px 6px;
    background: #EEE;
    color: #666666;
    font-size: 12px;
    cursor: default;
    &:hover{
      opacity: .8;
    }
    &:first-child{
      border-radius: 2px 0px 0px 2px;
      border-left-width: 1px;
    }
    &:last-child{
      border-radius: 0px 2px 2px 0px;
    }
    &.active {
      background: #80C269;
      color: #ffffff;
      border: 1px solid #80C269;
    }
    &.error {
      background: #D61D1D !important;
      border: 1px solid #D61D1D !important;
    }
  }
}
</style>